<template>
  <div>
    <van-search value="" input-align="center" placeholder="请输入搜索关键词" @click="goSearch" />

    <view class="categoryWrap flex">
      <scroll-view scroll-y enable-flex class="categoryLeft">
        <view class="category1Item" :class="currentIndex === index ? 'active' : ''" @click="change(index, item.id)"
          v-for="(item, index) in categoryList" :key="index">{{ item.name }}</view>
      </scroll-view>

      <view class="categoryRight">
        <view class="img">
          <image :src="currentCategory" mode="widthFix"></image>
        </view>
        <view class="list flex" v-for="(item, index) in categoryGroupList" :key="index">
          <!-- 跳转list页面需要传递二级分类的id -->
          <view class="item flex_c center" v-for="(item1, index) in item.categoryList" :key="index">
            <image :src="item1.wapBannerUrl" />
            <view>{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
  </div>

</template>

<script setup lang="ts">
import {ref} from 'vue'

import Ajax from '../../api/index'
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
const currentIndex = ref(0)
const currentCategory = ref<any>()
const categoryList = ref<any>()

const categoryGroupList = ref<any>()
onLoad(() =>{
  getCateList()
})

const getCateList = async () =>{
  let time = Date.now()
  let res = await Ajax.reqCatelists(time)
  categoryList.value = res.data.categoryL1List
  currentCategory.value = res.data.currentCategory.bannerList[0].picUrl
  categoryGroupList.value = res.data.categoryGroupList
}

const change = async (index:any,id:any) =>{
  let time = Date.now()
  currentIndex.value = index
  let res = await Ajax.reqCatelist(time,id)
  currentCategory.value = res.data.currentCategory.bannerList[0].picUrl
  categoryGroupList.value = res.data.categoryGroupList
}
const goSearch = () =>{
  uni.navigateTo({
    url:'/pages/search/index'
  })
}
</script>

<style scoped>
page {
  height: 100%;
}

.flex {
  display: flex;
}

.categoryWrap {
  height: 100%;
}

.categoryLeft {
  background-color: #eee;
  width: 160rpx;
  height: 100%;
}

.category1Item {
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  font-size: 26rpx;
}

.category1Item.active {
  background-color: #fff;
  position: relative;
}

.category1Item.active::after {
  content: '';
  width: 4rpx;
  height: 80%;
  background-color: red;
  position: absolute;
  left: 5%;
  top: 10%;
}

.categoryRight {
  padding: 20rpx;
  width: 590rpx;
}

.title {
  font-size: 32rpx;
}

.list {
  flex-wrap: wrap;
  /* justify-content: space-around; */
}

.item {
  align-items: center;
  width: 33.33%;
}

.item image {
  width: 60rpx;
  height: 60rpx;
  margin: 20rpx 0;
}

.item view {
  font-size: 24rpx;
}

.center {
  text-align: center;
}
</style>